

<template>
<div  >
 <div class="btn-group">
      <button v-add="'add'">添加</button>
      <button @click="handclick">导出图片</button>
      <button @click="qbclick">导出所有图片</button>
      <button @click="handclick2">导出pdf</button>
    </div>


  
<div style="height:450px;width:70vw;">
  <Vlistcs 
      :list="a" 
      :itemHeight="60" 
       :height="550"
       ref="vlistdom" 
       @delete="deleteItem"
       @update="update"
    />
</div>

  </div>
</template>
 <script setup lang="ts">
  // vue -react 搞混了 value
  //ref- ref -模板引用 current
  import { ElMessage, ElMessageBox } from 'element-plus';
 import { jsPDF } from "jspdf";
import { onMounted, ref } from 'vue'
import html2canvas from 'html2canvas'
import axios from "axios";
import { get } from 'lodash';


const isShow = ref(false)
let a =ref([])
let getlist=async()=>{
  let {data:{sj}}=await axios.get('http://localhost:3000/getsj')
  a.value=sj

}
onMounted(()=>{
 getlist()


})
const vlistdom=ref<InstanceType <typeof Vlist>|null>(null)//vlist组件选项对象--》   组件对象类型  InstanceType<typeof VList>
// canvas -元素转成图片
const handclick=()=>{
  isShow.value=true
  const rendenDom= vlistdom?.value.$el
  // canavs 不能把div绘制图片
  // const canvas = document.createElement('canvas')
  // const cts = canvas.getContext('2d')
  // ctx.drawImage(rendenDom,0,0,100,100)
// const dom=document.createElement('iframe')
//   dom.innerText='111111'   // 不行找不到dom没在页面上

  // iframe src=把整个页面加载找对应dom 框架 --沙箱 
  // 前端导出
  html2canvas(rendenDom).then((canvas)=>{
    const img = canvas.toDataURL('image/png')//base64
    //转成图片文件进行下载，借助于a标签
    const a = document.createElement('a')
    a.href = img
    a.download = 'mypng.png'
    //中后台系统，ie /360 
    //a.click();浏览器可能不支持
    const me=new MouseEvent('click')
    a.dispatchEvent(me)
    //后端导出 -》只有数据没有样式
    //1. 服务器端渲染 -》服务器上直接把数据渲染成html,
    // 2. 无头浏览器 -》无头浏览器，无界面的浏览器，可以模拟浏览器的渲染过程，把html渲染成图片，再进行下载。 看不到浏览器界面，几乎实现浏览器的全部功
  })
}
const handclick2=()=>{

//    var doc = new jsPDF();
// doc.html( vlistdom?.value.$el, {
//    callback: function (doc) {
//      doc.save();
//    },
//    x: 0,
//    y: 0,
//    width:100,
//    windowWidth: 400//设置这两个属性，让文档内容按比例缩写
// });

const element = vlistdom?.value.$el;
  
  // 确保元素存在
  if (!element) {
    console.error('无法获取列表元素');
    return;
  }
  
  // 应用中文字体（确保 DOM 中已有中文字体）
  element.style.fontFamily = "'Noto Sans SC', sans-serif";
  
  // 使用 html2canvas 转换为图片
  html2canvas(element, {
    scale: 2,               // 提高清晰度
    useCORS: true,          // 处理跨域图片
    logging: false,
    letterRendering: true,  // 确保文字正确渲染
    allowTaint: true        // 允许跨域资源
  }).then(canvas => {
    const imgData = canvas.toDataURL('image/jpeg', 1.0);
    const pdf = new jsPDF('p', 'mm', 'a4');
    
    // 计算图片尺寸以适应 A4 页面
    const imgWidth = 210; // A4 宽度 (mm)
    const imgHeight = canvas.height * imgWidth / canvas.width;
    
    // 添加图片到 PDF
    pdf.addImage(imgData, 'JPEG', 10, 10, imgWidth-20, imgHeight);
    pdf.save('列表内容.pdf');
  }).catch(error => {
    console.error('转换为 PDF 失败:', error);
  });
}
const qbclick=async()=>{
    console.log('开始导出所有图片')
   let {data:{code,base64}}=await axios.post('http://localhost:3000/add')
   console.log('code',code,base64);
   
   if(code==200){
    const data=`data:image/png;base64,${base64}`
    const a = document.createElement('a')
    a.href = data
    a.download = 'mypng.png'
    //中后台系统，ie /360 
    //a.click();浏览器可能不支持
    const me=new MouseEvent('click')
    a.dispatchEvent(me)
   }
}


const deleteItem=async(id:number)=>{
  let {data:{code}}=await axios.post('http://localhost:3000/deletesj',{id})
    ElMessage.success('删除成功');
    getlist()
    
}
const update=(i:any)=>{
    console.log('导出图片',)
}
</script>
<style scoped>
.app-container {
  width: 100%;
  height: 100px;
}

/* 按钮组样式 */
.btn-group {
  display: flex;
  gap: 8px; /* 按钮之间的间距 */
  margin: 16px; /* 与下方列表拉开距离 */
  flex-wrap: wrap; /* 适配小屏幕，防止按钮溢出 */
}

.btn-group button {
  padding: 8px 14px;
  border: none;
  border-radius: 4px;
  background-color: #409eff; /*  Element Plus 常用主题色，可根据实际调整 */
  color: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-group button:hover {
  background-color: #66b1ff; /*  hover 加深颜色 */
}

.btn-group button:active {
  transform: scale(0.98); /* 点击时轻微缩放，增强交互感 */
}

/* 如果想给“添加”按钮特殊颜色，可单独写 */
.btn-group button[v-add] {
  background-color: #67c23a; 
}
.btn-group button[v-add]:hover {
  background-color: #85ce61;
}
</style>